<!doctype html><!--声明当前文档为html-->
<html>
	<head><!--头部-->
		<meta charset="utf-8"><!--字符编码：utf-8国际编码  gbk gb2312中文编码-->
		<title>爱奇艺</title>
		<link rel="Shortcut Icon" type="image/ico" href= "" />
		<!--css样式表存放地点-->
		<style>
		
		*{/*通用选择器*/
			margin:0px;/*外边距*/padding:0px;/*内边距*/
		}
		#box{/*id选择器*/
		width:100%;/*宽度*/height:410px;/*高度*/
		/*background:red;背景颜色*/overflow:hidden;/*超出隐藏*/
		position:relative;/*相对定位*/
		}
		.img{width:100%;height:100%;}
		a{display:none;/*隐藏*/}
		a.first{
			display:block;
		}
		.bg{
			width:247px;height:371px;background:url("images/bg.png");
			position:absolute;/*绝对定位*/
			right:36px;
			bottom:9px;
			
		}
		.txt{
			width:212px;height:340px;
			position:absolute;
			right:55px;
			bottom:22px;
			border-radius:10px;/*圆角*/
			overflow:hidden;
		}
		ul li{list-style:none;/*去除前面的小圆点*/
			width:212px;height:34px;/*background:#699f00;*/
			color:#fff;/*文字颜色*/font-size:14px;/*文字大小*/
			line-height:34px;/*行高*/
			text-indent:10px;/*首行缩进*/
			font-family:"微软雅黑";
		}
		li.curr{
			background:#699f00;
		}
		</style>
	</head>
	<body><!--身体-->
		<!--div标签  有宽度、有高度的盒子模型标签-->
		<div id="box"><!--见名知意 id唯一的 class:重复性-->
			<div class="img"><!--存放图片-->
				<a href="#" class="first"><!--超链接标签-->
					<img src="images/1.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/2.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/3.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/4.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/5.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/6.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/7.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/8.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/9.jpg">
				</a>
				<a href="#"><!--超链接标签-->
					<img src="images/8.jpg">
				</a>
			</div>
			<div class="bg"></div>
			<div class="txt"><!--存放文本内容-->
				<ul><!--无序列表标签-->
					<li class="curr">正独家直播:金唱片音源大赏</li>
					<li>歌神：谢娜摇身一变“谢举纲”</li>
					<li>秦时明月：少羽反秦天明相助</li>
					<li>康熙“接班人”寻仇蔡康永</li>
					<li>蜀山战纪剑侠传奇：仙侠IP钜制</li>
					<li>寒假来啦！电影陪你嗨翻假期</li>
					<li>煮妇神探：猫狗CP欢乐探案</li>
					<li>彬彬有理：男人不坏女人不爱</li>
					<li>神剧亮了：巴拉拉老魔仙驾到！</li>
					<li>凯迪拉克荣誉呈献大头频道</li>
				</ul>
			</div>
		</div>
		<script src="js/jquery.js"></script>
		<script>
			//alert($);//弹出jquery的代理函数$
			var _index = 0;//全局变量 初始值为0
			var time = null;
			$("ul li").hover(function(){//鼠标滑上去实现什么效果
				_index = $(this).index();//获取鼠标滑上去的元素的序列号
				$(this).addClass("curr").siblings().removeClass("curr");
				$("a").eq(_index).fadeIn().siblings().hide();
			});
			$("#box").hover(function(){//鼠标移进来实现什么效果
				clearInterval(time);//清楚定时器
			},function(){//鼠标离开实现什么效果
				autoPlay();//调用自动轮播
			});
			function autoPlay(){
				time = setInterval(function(){//定时器：多长时间调用一次里面的函数
					$("ul li").eq(_index).addClass("curr").siblings().removeClass("curr");
					$("a").eq(_index).fadeIn().siblings().hide();
					_index++;//_index = _index + 1
					if (_index>9)
					{
						_index = 0;
					}
				},3000);
			}
			autoPlay();
		</script>
	</body>
</html>